<template>
  <div class="transform">
    <div class="position">
      <el-form :model="transformForm" label-suffix="：">
        <div class="titleBox">
          <span class="title">位置信息</span>
          <span class="step">
            修改速度：
            <el-input-number
              style="width: 80px"
              v-model="positionStep"
              :min="0.01"
              size="small"
              :step="0.01"
              controls-position="right"
            />
          </span>
        </div>
        <el-form-item label="x 坐标" prop="x">
          <el-input-number
            v-model="transformForm.x"
            controls-position="right"
            :step="positionStep"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="y 坐标" prop="y">
          <el-input-number
            v-model="transformForm.y"
            controls-position="right"
            :step="positionStep"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="z 坐标" prop="z">
          <el-input-number
            v-model="transformForm.z"
            controls-position="right"
            :step="positionStep"
            :precision="2"
          />
        </el-form-item>
        <div class="titleBox">
          <span class="title">大小信息</span>
          <span class="step">
            修改速度：
            <el-input-number
              style="width: 80px"
              v-model="scaleStep"
              :min="0.01"
              size="small"
              :step="0.01"
              controls-position="right"
            />
          </span>
        </div>
        <el-form-item label="x 方向" prop="scaleX">
          <el-input-number
            v-model="transformForm.scaleX"
            controls-position="right"
            :step="scaleStep"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="y 方向" prop="scaleY">
          <el-input-number
            v-model="transformForm.scaleY"
            controls-position="right"
            :step="scaleStep"
            :precision="2"
          />
        </el-form-item>
        <el-form-item label="z 方向" prop="scaleZ">
          <el-input-number
            v-model="transformForm.scaleZ"
            controls-position="right"
            :step="scaleStep"
            :precision="2"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface ITransform {
  x: number
  y: number
  z: number
  scaleX: number
  scaleY: number
  scaleZ: number
}

const props = defineProps<{
  transform: ITransform
  positionStep: number
  scaleStep: number
}>()

interface EmitsType {
  (e: 'update:transform', value: ITransform): void
  (e: 'update:positionStep', value: number): void
  (e: 'update:scaleStep', value: number): void
}
const emit = defineEmits<EmitsType>()

const positionStep = computed({
  get() {
    return props.positionStep
  },
  set(value) {
    emit('update:positionStep', value)
  },
})
const scaleStep = computed({
  get() {
    return props.scaleStep
  },
  set(value) {
    emit('update:scaleStep', value)
  },
})

const transformForm = computed({
  get() {
    return props.transform
  },
  set(value) {
    emit('update:transform', value)
  },
})
</script>

<style scoped lang="scss">
.transform {
  width: 250px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1f1f1f;
  padding: 10px;
  .titleBox {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    span {
      color: #fff;
    }
    .title {
      font-size: 16px;
      margin-bottom: 10px;
      font-weight: 600;
      color: #fff;
    }
    .step {
      font-size: 12px;
    }
  }
}
</style>
